/*
 * Copyright © 2015 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import "../../variables.less";
@import "../../../../bower_components/bootstrap/less/mixins.less";

body.theme-cdap {
  main {
    .slanted-tabs.nav-tabs, my-tabs .nav-tabs {
      > li {
        min-width: 80px;
        > a {
          color: @cdap-gray;
          font-weight: 500;
          font-size: 14px;
          &:hover {
            background-color: transparent;
            border: 1px solid transparent;
            color: @cdap-orange;
            cursor: pointer;
          }
          &:focus {
            outline: none;
          }
        }
        &.active {
          > a {
            border-right: 1px solid transparent;
            &:hover {
              background-color: @subnav-background;
              border-right: 1px solid transparent;
              border-top: 1px solid @nav-tabs-border-color;
              border-left: 1px solid @nav-tabs-border-color;
              border-bottom: 1px solid transparent;
              color: @cdap-gray;
              cursor: default;
            }
          }
          &.bottom-border-tab {
            > a, > a:hover, &:after {
              border-bottom: 1px solid @nav-tabs-border-color;
            }
            > a, > a:hover {
              border-right: 0;
            }
          }
        }
      }
      > li.active::after {
        content: '';
        height: 100%;
        width: 15%;
        border-right: 1px solid @nav-tabs-border-color;
        border-top: 1px solid @nav-tabs-border-color;
        .skew(15deg, 0);
        position: absolute;
        top: 0;
        right: -5px;
        background-color: @subnav-background;
      }
    }
  }
}
